<template>
  <div class="unified-tasks">
    <div class="tasks-header">
      <h2 class="tasks-title">待处理事项中心</h2>
      <div class="header-actions">
        <button v-if="selectedItems.length > 0" class="batch-btn" @click="batchProcess">
          <i class="fas fa-check-double"></i> 批量处理
        </button>
        <div class="filter-dropdown">
          <button class="filter-btn" @click="showFilters = !showFilters">
            <i class="fas fa-filter"></i>
            筛选
          </button>
          <div v-if="showFilters" class="filter-panel">
            <div class="filter-item">
              <div class="filter-label">类型</div>
              <div class="filter-options">
                <label class="filter-option">
                  <input type="checkbox" v-model="filters.typeAll" @change="handleTypeAllChange">
                  <span>全部</span>
                </label>
                <label v-for="type in taskTypes" :key="type.value" class="filter-option">
                  <input type="checkbox" v-model="filters.types" :value="type.value" @change="handleTypeChange">
                  <span>{{ type.label }}</span>
                </label>
              </div>
            </div>
            <div class="filter-item">
              <div class="filter-label">时间段</div>
              <div class="filter-date-range">
                <input type="date" v-model="filters.startDate" class="date-input">
                <span class="date-separator">至</span>
                <input type="date" v-model="filters.endDate" class="date-input">
              </div>
            </div>
            <div class="filter-actions">
              <button class="reset-btn" @click="resetFilters">重置</button>
              <button class="apply-btn" @click="applyFilters">应用</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div 
        v-for="stat in statsData" 
        :key="stat.type"
        class="stat-card"
        :class="[`bg-${stat.color}`]"
        @click="filterByType(stat.type)"
      >
        <div class="stat-value">{{ stat.count }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>
    
    <!-- 任务列表 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
    
    <div v-else-if="filteredTasks.length === 0" class="empty-container">
      <i class="fas fa-clipboard-check empty-icon"></i>
      <div class="empty-text">暂无待处理事项</div>
    </div>
    
    <div v-else class="tasks-list">
      <div 
        v-for="task in filteredTasks" 
        :key="task.id"
        class="task-item"
        :class="{ 'selected': isSelected(task.id) }"
      >
        <div class="task-checkbox" @click="toggleSelect(task.id)">
          <i :class="[isSelected(task.id) ? 'fas fa-check-square' : 'far fa-square']"></i>
        </div>
        
        <div class="task-content" @click="viewTaskDetail(task)">
          <div class="task-meta">
            <span class="task-type" :class="[`type-${task.type}`]">{{ getTypeLabel(task.type) }}</span>
            <span class="task-time">{{ task.createTime }}</span>
          </div>
          
          <div class="task-title">{{ task.title }}</div>
          
          <div class="task-info">
            <div class="info-item">
              <i class="fas fa-user-alt info-icon"></i>
              <span>{{ task.creator }}</span>
            </div>
            <div v-if="task.deadline" class="info-item" :class="{ 'urgent': isUrgent(task) }">
              <i class="fas fa-clock info-icon"></i>
              <span>截止: {{ task.deadline }}</span>
            </div>
          </div>
        </div>
        
        <div class="task-actions">
          <button class="action-btn primary" @click="handleTask(task, 'approve')">
            <i class="fas fa-check"></i>
            <span>同意</span>
          </button>
          <button class="action-btn reject" @click="handleTask(task, 'reject')">
            <i class="fas fa-times"></i>
            <span>拒绝</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 任务详情弹窗 -->
    <div v-if="currentTask" class="task-modal" @click.self="closeTaskDetail">
      <div class="task-detail">
        <div class="detail-header">
          <h3 class="detail-title">{{ currentTask.title }}</h3>
          <button class="close-btn" @click="closeTaskDetail">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="detail-content">
          <div class="detail-type">
            <span class="detail-type-label" :class="[`type-${currentTask.type}`]">
              {{ getTypeLabel(currentTask.type) }}
            </span>
          </div>
          
          <div class="detail-meta">
            <div class="meta-item">
              <div class="meta-label">创建人</div>
              <div class="meta-value">{{ currentTask.creator }}</div>
            </div>
            <div class="meta-item">
              <div class="meta-label">创建时间</div>
              <div class="meta-value">{{ currentTask.createTime }}</div>
            </div>
            <div v-if="currentTask.deadline" class="meta-item">
              <div class="meta-label">截止时间</div>
              <div class="meta-value" :class="{ 'urgent': isUrgent(currentTask) }">
                {{ currentTask.deadline }}
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <div class="section-title">详细内容</div>
            <div class="section-content">{{ currentTask.content }}</div>
          </div>
          
          <div v-if="currentTask.attachments && currentTask.attachments.length > 0" class="detail-section">
            <div class="section-title">附件</div>
            <div class="attachments-list">
              <div 
                v-for="(file, index) in currentTask.attachments" 
                :key="index"
                class="attachment-item"
              >
                <i class="fas fa-file attachment-icon"></i>
                <div class="attachment-name">{{ file.name }}</div>
                <button class="download-btn">
                  <i class="fas fa-download"></i>
                </button>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <div class="section-title">处理意见</div>
            <textarea 
              v-model="approvalComment" 
              class="approval-input" 
              placeholder="请输入您的处理意见..."
              rows="3"
            ></textarea>
          </div>
        </div>
        
        <div class="detail-footer">
          <button class="footer-btn cancel" @click="closeTaskDetail">取消</button>
          <button class="footer-btn reject" @click="handleTask(currentTask, 'reject')">拒绝</button>
          <button class="footer-btn primary" @click="handleTask(currentTask, 'approve')">同意</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UnifiedTasks',
  data() {
    return {
      loading: false,
      tasks: [],
      currentTask: null,
      selectedItems: [],
      approvalComment: '',
      showFilters: false,
      taskTypes: [
        { label: '财务审批', value: 'finance' },
        { label: '资产审批', value: 'asset' },
        { label: '物资审批', value: 'material' },
        { label: '流程审批', value: 'workflow' },
      ],
      filters: {
        typeAll: true,
        types: [],
        startDate: '',
        endDate: '',
        applied: false
      },
      // 模拟统计数据
      statsData: [
        { label: '全部待办', type: 'all', count: 0, color: 'grey' },
        { label: '财务审批', type: 'finance', count: 0, color: 'blue' },
        { label: '资产审批', type: 'asset', count: 0, color: 'purple' },
        { label: '物资审批', type: 'material', count: 0, color: 'green' }
      ]
    }
  },
  computed: {
    // 过滤后的任务列表
    filteredTasks() {
      let result = [...this.tasks]
      
      // 按类型过滤
      if (!this.filters.typeAll && this.filters.types.length > 0) {
        result = result.filter(task => this.filters.types.includes(task.type))
      }
      
      // 按日期过滤
      if (this.filters.startDate) {
        const startDate = new Date(this.filters.startDate)
        result = result.filter(task => new Date(task.createTime) >= startDate)
      }
      
      if (this.filters.endDate) {
        const endDate = new Date(this.filters.endDate)
        endDate.setHours(23, 59, 59)
        result = result.filter(task => new Date(task.createTime) <= endDate)
      }
      
      return result
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    // 获取任务列表
    fetchTasks() {
      this.loading = true
      
      // 模拟API调用
      setTimeout(() => {
        this.tasks = this.getMockTasks()
        this.updateStats()
        this.loading = false
      }, 800)
    },
    
    // 生成模拟任务数据
    getMockTasks() {
      return [
        {
          id: 't1',
          type: 'finance',
          title: '差旅费报销审批',
          creator: '张医生',
          createTime: '2024-04-05 09:30',
          deadline: '2024-04-10',
          content: '张医生提交的3月26日至3月28日三亚出差报销审批，共计3280元。',
          attachments: [
            { name: '差旅费明细.xlsx', url: '#' },
            { name: '火车票.pdf', url: '#' }
          ]
        },
        {
          id: 't2',
          type: 'asset',
          title: '办公电脑申请审批',
          creator: '李护士',
          createTime: '2024-04-04 14:22',
          deadline: '2024-04-08',
          content: '李护士申请一台新的办公电脑，原因是现有电脑已使用超过5年，性能下降明显。'
        },
        {
          id: 't3',
          type: 'material',
          title: '医用口罩申领审批',
          creator: '王主任',
          createTime: '2024-04-04 10:15',
          deadline: '2024-04-05',
          content: '王主任申领医用口罩500个，用于急诊科日常工作。'
        },
        {
          id: 't4',
          type: 'workflow',
          title: '年假申请审批',
          creator: '赵药师',
          createTime: '2024-04-03 16:40',
          deadline: '2024-04-06',
          content: '赵药师申请4月15日至4月19日共5天年假，请审批。'
        },
        {
          id: 't5',
          type: 'finance',
          title: '办公用品采购审批',
          creator: '孙会计',
          createTime: '2024-04-02 11:20',
          deadline: '2024-04-07',
          content: '财务部需要采购一批办公用品，包括打印纸、文件夹等，共计1680元。',
          attachments: [
            { name: '采购清单.docx', url: '#' }
          ]
        }
      ]
    },
    
    // 更新统计数据
    updateStats() {
      // 更新全部待办数量
      this.statsData[0].count = this.tasks.length
      
      // 更新各类型待办数量
      this.taskTypes.forEach((type, index) => {
        if (index + 1 < this.statsData.length) {
          this.statsData[index + 1].count = this.tasks.filter(
            task => task.type === type.value
          ).length
        }
      })
    },
    
    // 查看任务详情
    viewTaskDetail(task) {
      this.currentTask = { ...task }
      this.approvalComment = ''
    },
    
    // 关闭任务详情
    closeTaskDetail() {
      this.currentTask = null
      this.approvalComment = ''
    },
    
    // 处理任务
    handleTask(task, action) {
      if (this.currentTask) {
        this.closeTaskDetail()
      }
      
      // 模拟API调用
      const actionLabel = action === 'approve' ? '同意' : '拒绝'
      
      console.log(`${actionLabel}了任务:`, task.id, '意见:', this.approvalComment)
      
      // 从列表中移除任务
      this.tasks = this.tasks.filter(t => t.id !== task.id)
      
      // 如果任务在选中项中，也从选中项中移除
      if (this.isSelected(task.id)) {
        this.selectedItems = this.selectedItems.filter(id => id !== task.id)
      }
      
      // 更新统计
      this.updateStats()
      
      // 显示成功提示
      this.$toast?.success(`已${actionLabel}${task.title}`)
    },
    
    // 批量处理
    batchProcess() {
      // 模拟批量处理
      console.log('批量处理任务:', this.selectedItems)
      
      // 从列表中移除这些任务
      this.tasks = this.tasks.filter(task => !this.selectedItems.includes(task.id))
      
      // 显示成功提示
      this.$toast?.success(`已批量处理${this.selectedItems.length}项任务`)
      
      // 清空选中项
      this.selectedItems = []
      
      // 更新统计
      this.updateStats()
    },
    
    // 切换选中状态
    toggleSelect(id) {
      if (this.isSelected(id)) {
        this.selectedItems = this.selectedItems.filter(item => item !== id)
      } else {
        this.selectedItems.push(id)
      }
    },
    
    // 检查是否选中
    isSelected(id) {
      return this.selectedItems.includes(id)
    },
    
    // 通过类型筛选
    filterByType(type) {
      if (type === 'all') {
        this.filters.typeAll = true
        this.filters.types = []
      } else {
        this.filters.typeAll = false
        this.filters.types = [type]
      }
      
      this.filters.applied = true
      this.showFilters = false
    },
    
    // 处理全选类型
    handleTypeAllChange() {
      if (this.filters.typeAll) {
        this.filters.types = []
      }
    },
    
    // 处理类型选择变化
    handleTypeChange() {
      if (this.filters.types.length > 0) {
        this.filters.typeAll = false
      } else {
        this.filters.typeAll = true
      }
    },
    
    // 应用筛选
    applyFilters() {
      this.filters.applied = true
      this.showFilters = false
    },
    
    // 重置筛选
    resetFilters() {
      this.filters = {
        typeAll: true,
        types: [],
        startDate: '',
        endDate: '',
        applied: false
      }
    },
    
    // 获取类型标签
    getTypeLabel(type) {
      const typeObj = this.taskTypes.find(t => t.value === type)
      return typeObj ? typeObj.label : type
    },
    
    // 检查是否紧急（截止日期在2天内）
    isUrgent(task) {
      if (!task.deadline) return false
      
      const now = new Date()
      const deadline = new Date(task.deadline)
      const diffDays = Math.ceil((deadline - now) / (1000 * 60 * 60 * 24))
      
      return diffDays <= 2
    }
  }
}
</script>

<style scoped>
.unified-tasks {
  padding: 16px;
}

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tasks-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.batch-btn, .filter-btn {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--divider);
  background-color: var(--background-white);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
}

.batch-btn i, .filter-btn i {
  margin-right: 4px;
}

.batch-btn {
  background-color: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

/* 筛选下拉面板 */
.filter-dropdown {
  position: relative;
}

.filter-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  background-color: var(--background-white);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 16px;
}

.filter-item {
  margin-bottom: 16px;
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.filter-option input {
  margin-right: 4px;
}

.filter-date-range {
  display: flex;
  align-items: center;
}

.date-input {
  flex: 1;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--divider);
  border-radius: 4px;
}

.date-separator {
  margin: 0 8px;
  color: var(--text-secondary);
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.reset-btn, .apply-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.reset-btn {
  background-color: var(--background-white);
  color: var(--text-primary);
  border: 1px solid var(--divider);
}

.apply-btn {
  background-color: var(--primary-blue);
  color: white;
  border: none;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.bg-blue {
  background-color: var(--background-blue-light);
}

.bg-purple {
  background-color: rgba(142, 36, 170, 0.1);
}

.bg-green {
  background-color: var(--background-green-light);
}

.bg-grey {
  background-color: var(--background-grey);
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-text {
  font-size: 16px;
}

/* 任务列表 */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  align-items: stretch;
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.task-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-item.selected {
  background-color: var(--background-blue-light);
}

.task-checkbox {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary-blue);
}

.task-content {
  flex: 1;
  padding: 12px 16px;
  cursor: pointer;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.task-type {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.type-finance {
  background-color: var(--background-blue-light);
  color: var(--primary-blue);
}

.type-asset {
  background-color: rgba(142, 36, 170, 0.1);
  color: #8e24aa;
}

.type-material {
  background-color: var(--background-green-light);
  color: var(--medical-green);
}

.type-workflow {
  background-color: rgba(255, 152, 0, 0.1);
  color: #ff9800;
}

.task-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.task-info {
  display: flex;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.info-icon {
  margin-right: 4px;
}

.info-item.urgent {
  color: var(--error);
}

.task-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-left: 1px solid var(--divider);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  flex: 1;
}

.action-btn i {
  font-size: 14px;
  margin-bottom: 4px;
}

.action-btn.primary {
  background-color: var(--success-light);
  color: var(--success);
}

.action-btn.reject {
  background-color: var(--error-light);
  color: var(--error);
}

/* 任务详情弹窗 */
.task-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.task-detail {
  width: 90%;
  max-width: 600px;
  background-color: var(--background-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--divider);
}

.detail-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  background-color: var(--background-grey);
}

.detail-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.detail-type {
  margin-bottom: 16px;
}

.detail-type-label {
  padding: 2px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.detail-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.meta-value {
  font-size: 14px;
  color: var(--text-primary);
}

.meta-value.urgent {
  color: var(--error);
}

.detail-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.section-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--background-grey);
  border-radius: 4px;
}

.attachment-icon {
  color: var(--text-secondary);
  margin-right: 8px;
}

.attachment-name {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
}

.download-btn {
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
}

.approval-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

.approval-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--divider);
}

.footer-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.footer-btn.cancel {
  background-color: var(--background-white);
  color: var(--text-primary);
  border: 1px solid var(--divider);
}

.footer-btn.primary {
  background-color: var(--success);
  color: white;
  border: none;
}

.footer-btn.reject {
  background-color: var(--error);
  color: white;
  border: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .detail-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .task-item {
    flex-wrap: wrap;
  }
  
  .task-actions {
    flex-direction: row;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--divider);
  }
  
  .action-btn {
    flex-direction: row;
  }
  
  .action-btn i {
    margin-bottom: 0;
    margin-right: 4px;
  }
}
</style> 